<template>
    <div class="player">
      <div class="left">
        <img class="disc" src="../assets/img/disc.png" alt="" />
        <img class="cover" :src="coverUrl" alt="" />
      </div>
      <div class="right">
        <div class="title">
          <img src="../assets/img/tag.png" alt="" /><span>{{songName}}</span>
        </div>
        <div class="singer">歌手: <span>{{singerName}}</span></div>
        <div class="album">所属专辑: <span>{{albumName}}</span></div>
        <audio class="audio" controls autoplay :src="musicUrl"></audio>
        <ul class="lyric-container">
          <li class="lyric" v-for="(item,index) in lyric" :key="'lyric'+index">{{item | Filter}}</li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          // 歌曲地址
          musicUrl: '',
          // 歌手名
          singerName: '',
          // 封面
          coverUrl: '',
          // 专辑名
          albumName: '',
          // 歌名
          songName: '',
          // 歌词
          lyric: [],
        };
      },
      // 生命周期钩子
      async created() {
        // 调用接口 获取url
        this.musicUrl = `https://music.163.com/song/media/outer/url?id=${this.$route.params.id}.mp3 `
        let songInfo = JSON.parse(window.localStorage.getItem("song"));
        // 歌名
        this.songName = songInfo.name;
        // 专辑名
        this.albumName = songInfo.album.name;
        // 歌手名
        this.singerName = songInfo.artists[0].name;
        let coverUrldata = await this.$axios.get('https://autumnfish.cn/album?id=' + songInfo.album.id);
        this.coverUrl = coverUrldata.data.album.picUrl
        // 获取歌词
        let lyricdata = await this.$axios.get(`/lyric?id=${this.$route.params.id}`);
        this.lyric = lyricdata.data.lrc.lyric.split('\n')
      },
      filters: {
        Filter(gechu) {
          // 过滤器对歌词进行过滤
          var text = gechu;
          text = text.replace(/\[\d{2}\:\d{2}\.\d{2,3}\]/, "");
          return text
        }
      }
    };
  </script>
  
  <style scoped>
    @import "@/assets/css/player.css";
  </style>